<template>
	<view class="wrapper">
		<u-navbar title="" bgColor="transparent" :titleStyle="{color: '#fff'}" leftIconColor="#fff"
			style="margin-top: 10%;">
			<view class="" slot="left" @click="navBackPage">
				<view class="header_operation">
					<u-icon name="arrow-left" class="back" size="15" color="#fff"></u-icon>
				</view>
			</view>

			<view class="header_operation" slot="right">
				<u-icon name="download" class="edit" size="21" color='#fff' @click="downVideo()"></u-icon>
			</view>
			<view class="header_operation" slot="right" @click="isStar = !isStar, changeStar()">
				<u-icon :name="isStar ? 'star-fill' : 'star'" class="start" size="21"
					:color="isStar ? 'rgb(245, 110, 61)' : '#fff'"></u-icon>
			</view>
			<view class="header_operation" slot="right">
				<u-icon name="edit-pen-fill" class="edit" size="21" color='#fff' @click="navEdit"></u-icon>
			</view>
			<view class="header_operation" slot="right">
				<u-icon name="share-square" class="edit" size="21" color='#fff' @click="navSquare"></u-icon>
			</view>
		</u-navbar>
		<view class="swiper_box" style="margin-top: 10%;">
			<swiper v-if="showMideair == 'img'" class="swiper" circular :indicator-dots="indicatorDots"
				:interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) of imgList" :key="item.url" class="swiper_item">
					<image :src="item.url || '../../static/default/img_404.jpg'" mode=""
						@tap="_previewImage(item.url, index)"></image>
				</swiper-item>
			</swiper>
			<swiper v-if="showMideair == 'video'" class="swiper" circular :indicator-dots="indicatorDots"
				:interval="interval" :duration="duration">
				<template v-if="videoList.length != 0">
					<swiper-item v-for="(item, index) of videoList" :key="item.url" class="swiper_item"
						style="position: relative;">
						<!-- <video :src="item.url" mode="" direction="0" style="width: 100%;height: 85%;"></video> -->
						<!-- video id="myVideo" direction="0" style="width: 100%;height: 85%;" :src="item.url" controls
							@play="onVideoTap" @fullscreenchange='fullscreenchange'></video> -->
				<!-- 		<cover-image
							style=" display: inline-block; width: 50rpx; height: 50rpx; position: absolute; z-index: 99999; left: 50%; top: 50%; transform: translate(-50%, -50%);"
							@click="play" src="../../static/lease/paly_video.png"></cover-image> -->
						<video :controls="false" :enable-progress-gesture="false" id="myVideo" direction="0"
							style="width: 100%; height: 85%; " :src="item.url" controls @play="onVideoTap(item.url)"
							@fullscreenchange="fullscreenchange" :show-fullscreen-btn="false">

						</video>
					</swiper-item>
				</template>
				<template v-else>
					<swiper-item class="swiper_item">

						<image src="../../static/default/img_404.jpg" mode="" @tap="_previewImage(item.url,item)">
						</image>
					</swiper-item>
				</template>
			</swiper>
			<view class="meadia_option">
				<view class="slot_floor">
					<view :class="['item', showMideair == 'img' ? 'active_floor' :'']" @click="showMideair = 'img'">
						图片
					</view>
					<view :class="['item', showMideair == 'video' ? 'active_floor' :'']" @click="showMideair = 'video'">
						视频
					</view>
				</view>
			</view>
		</view>
		<view class="middle">
			<u-cell :border="false" @click="navEdit">
				<u--text slot="title" :text="(info.rentalType == 0 ? '合租 * ' : '整租 * '  ) + info.communityName " bold
					size="18" lineHeight="20"></u--text>
				<u--text slot="value" text="照片视频" color="rgb(245, 110, 61)" align="right" size="15"
					lineHeight="20"></u--text>
				right-icon
				<u-icon slot="right-icon" name="arrow-right" color="rgb(245, 110, 61)"></u-icon>
			</u-cell>
			<u-cell :border="false">
				<u--text slot="title" :text="  info.rentState == 0 ? '未租' :(info.rentState == '1' ? '已租' : '转租中')" bold
					size="16" lineHeight="20" color="red"></u--text>

				<u--text slot="value" @click="costDetail" v-if="info.rentState == 1" text="查看租约"
					color="rgb(245, 110, 61)" align="right" size="15" lineHeight="20"></u--text>
				<u--text slot="value" @click="costDetail" v-if="info.rentState == 2 " text="历史租约"
					color="rgb(245, 110, 61)" align="right" size="15" lineHeight="20"></u--text>
				<u-icon slot="right-icon" @click="costDetail" v-if="info.rentState == 1 || info.rentState == 2"
					name="arrow-right" color="rgb(245, 110, 61)"></u-icon>
			</u-cell>
			<u-cell :border="false" @click="navEdit">
				<u--text slot="value" text="费用详情" color="rgb(245, 110, 61)" align="right" size="14"
					lineHeight="20"></u--text>
				<view slot="title" style="display: flex;">

					<view><u--text :text="info.rental" size="20" color="red" lineHeight="20"></u--text></view>
					<view><u--text text="  元/月  " align="right" size="14" lineHeight="20"></u--text></view>
				</view>
				<u-icon slot="right-icon" name="arrow-right" color="rgb(245, 110, 61)"></u-icon>
			</u-cell>
		</view>
		<view class="bottom">
			<u--text text="基础信息 " bold size="18" lineHeight="20"></u--text>
			<table>

				<tr>
					<td>房源地址</td>
					<td>{{ info.communityAddress }}</td>
				</tr>
				<tr>
					<td>房源信息</td>
					<td v-if="info.rentalType == 0">
						{{ info.buildingNumber }}栋{{ info.unitNumber }}单元{{ info.ventricleNumber }}室{{ info.roomNumber }}
					</td>
					<td v-if="info.rentalType == 1">
						{{ info.buildingNumber }}栋{{ info.unitNumber }}单元{{ info.ventricleNumber }}室
					</td>
				</tr>
				<tr>
					<td>户型</td>
					<td>{{ info.houseType }}</td>
				</tr>
				<tr>
					<td>楼层</td>
					<td> {{ info.floor }}</td>
				</tr>
				<tr>
					<td>面积</td>
					<td>{{ info.area }}</td>
				</tr>
				<tr>
					<td>短租</td>

					<td>{{ info.shortRental }}</td>
				</tr>
				<tr>
					<td>钥匙</td>
					<td>{{ info.houseKey }}</td>
				</tr>
				<tr v-if="info.surveyMan!=null">
					<td>勘验人</td>
					<td>{{ info.surveyMan}}--<font style="color: coral;" @click="toBrokerPhoneInfo()">
							{{ info.surveyPhone}}
						</font>
					</td>
				</tr>
				<tr>
					<td>勘察印象</td>
					<td>{{ info.surveyComment || '无'}}</td>
				</tr>
				<tr>
					<td>房间备注</td>
					<td v-if="this.remarkIsOtherUse==1">无备注</td>
					<td v-if="this.remarkIsOtherUse==0">{{ info.remark }}</td>
				</tr>

			</table>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="button" style="margin-top: 15%;">
			<view class="footer" v-if="info.rentState == 0" style="margin-top: 15%;">
				<view class="">
					<u-button class="btn" ripple @click="toEnterAgreement"
						color="linear-gradient(to right, #3999fe, #115ef1)">我要签约</u-button>
				</view>
				<view class="">
					<u-button class="btn" ripple @click="toPerfectInfo" color="#f56e3d">联系房东</u-button>
				</view>
			</view>
			<!-- <view class="call_lanlord" v-else>
				<u-button type="primary" shape="circle" color="rgb(245, 110, 61)" class="button"
					@tap="callCustomerService">联系房东</u-button>
			</view> -->
			<view class="footer" v-else style="margin-top: 15%;">
				<view class="">
					<u-button class="btn" v-if="info.rentState == 2" ripple @click="toEnterAgreement"
						color="linear-gradient(to right, #3999fe, #115ef1)">录入租约</u-button>
					<u-button class="btn" v-else ripple @click="sublease"
						color="linear-gradient(to right, #3999fe, #115ef1)">转租</u-button>
				</view>
				<view class="">
					<u-button class="btn" ripple @click="callCustomerService" color="#f56e3d">联系房东</u-button>
				</view>
			</view>
		</view>

		<u-popup :show="isShowOptrainCall" @close="isShowOptrainCall = false">
			<view class="popup">
				<u-button type="primary" color="rgb(245, 110, 61)" class="button" @tap="callUser">拨打房东电话</u-button>
				<u-button @click="isShowOptrainCall = false">取消</u-button>
			</view>
		</u-popup>

		<u-popup :show="isShowBrokerCall" @close="isShowBrokerCall = false">
			<view class="popup">
				<u-button type="primary" color="rgb(245, 110, 61)" class="button"
					@tap="callBrokerUser">拨打勘验人电话</u-button>
				<u-button @click="isShowBrokerCall = false">取消</u-button>
			</view>
		</u-popup>

		<u-popup :show="showPopupQuit" mode="center" :round="10" closeOnClickOverlay>
			<view class="popup">
				<view class="cue">
					房源是否有效？
				</view>
				<view class="button_box">
					<u-button type="primary" class="sure" @click="changehouseState('0')" color="#f05a23">有效</u-button>
					<u-button @click="changehouseState('1')">无效</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showShare" :closeable="true" :overlay="false" mode="bottom" :closeOnClickOverlay="false"
			:customStyle="{borderTop:'1rpx solid #dadada'}" @close="showShare = false">
			<view class="padding">
				<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange1">
					<u-checkbox shape="circle" :customStyle="{marginBottom: '20px',marginRight: '20px'}"
						v-for="(item, index) in checkboxList" :key="index" :label="item.label" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
				<!-- <u--text :text="text"></u--text> -->
				<view class="text_row">
					<view style="width: 60%;">
						已选<text>{{checkedList.length || 1}}</text>套房源
					</view>
					<u-button color="#f05a23" text="分享到好友" style="width: 40%;" @click="shareInfo('WXSceneSession')"
						size="normal"></u-button>
					<u-button color="#3c9cff" text="分享到朋友圈" style="width: 40%; margin-left: 10%;"
						@click="shareInfo('WXSceneTimeline')" size="normal"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showQrTips" mode="center" :overlay="true" :round="10" :closeable="true"
			:closeOnClickOverlay="true" @close="showQrTips = false">
			<view style="width: 350px;height:380px;">
				<image :src="qrimgUrl" style="width: 310px;top:3%;height: 310px;left: 5%;"></image>
				<u-button type="warning" size="small" shape="circle" style="width: 50%;height: 35px;font-size: 20px;"
					text="保存到相册" @click="saveImage"></u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>

		<!--  -->

		<u-popup :show="subLeaseShow" mode="center" @close="subLeaseShow = false" @open="subLeaseShow = true">
			<view class="sublease_reason">
				<view class="title">请输入转租原因:</view>
				<u--textarea v-model="subLeaseMsg" placeholder="请输入转租原因"></u--textarea>
				<u-button @click="confirmSubLease" type="primary" color="rgb(245, 110, 61)" shape="circle" text="确认转租"
					class="sublease_btn"></u-button>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		getDetail,
		addStar,
		deleteStars,
		putHouseState,
		getQrcode,
		subLease
	} from '@/api/home/index.js'

	import debounce from "@/utils/debounce.js"
	export default {
		data() {
			return {
				isFullScreen: false,
				videoContext: null,
				isFullScreen: false,
				subLeaseMsg: "",
				subLeaseShow: false,
				showShare: false,
				showPopupQuit: false,
				isShowOptrainCall: false,
				isShowBrokerCall: false,
				interval: 2000,
				indicatorDots: true,
				isStar: false,
				id: null,
				showMideair: "img",
				info: {},
				checkedList: [],
				imgList: [{
					url: '../../static/default/img_404.jpg'
				}],
				videoList: [],
				duration: 500,
				videoUrl: '',
				remarkIsOtherUse: 0, //备注字段用作钥匙信息登记 密码或者其他位置时 备注字段不再显示具体内容
				showQrTips: false,
				checkboxValue1: [],
				qrimgUrl: '',
				checkboxList: [{
						label: '显示小区',
						name: 'community',
					},
					{
						label: '显示租金',
						name: 'rent',
					}
				],
				fliterChecked: []
			}
		},
		onLoad(item) {
			console.log(item);
			this.id = item.id;
			this.getData()
		},
		checkboxChange1(n) {
			this.fliterChecked = n
		},
		onBackPress(e) {
			//backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
			if (e.from === 'backbutton') {
				if (this.showPopupQuit) {
					this.$refs.uToast.show({
						type: "error",
						message: "请确认房源是否有效?",
						position: "bottom"
					})
					return true // 阻止返回
				}
				// 					http://192.168.2.9:18080/front/broker/sublet/list?pageNum=1&pageSize=10&subletApplyState=0

				// http://192.168.2.9:18080/front/landlord/sublet/list?pageNum=1&pageSize=10&subletApplyState=1
			}

		},
		methods: {
			costDetail() {
				if (!this.info.leaseId) return this.$refs.uToast.show({
					type: "error",
					message: '暂无租约'
				})
				uni.navigateTo({
					url: '/pages/my/lease/leaseDetail?id=' + this.info.leaseId + "&state=2"
				})
			},
			onVideoTap(url) {
				this.videoContext = uni.createVideoContext('myVideo');
				this.videoContext.stop();
				this.showMideair = 'img'
			 
				// if (this.videoContext) {
				//   if (this.isFullScreen) {
				//     this.videoContext.exitFullScreen(); // 如果当前是全屏，则退出全屏
				//   } else {
				//     this.videoContext.requestFullScreen({ direction: 0 }); // 进入全屏
				//   }
				// }
				uni.navigateTo({
					url: `../public/VideoPlayer/VideoPlayer?url=${encodeURIComponent(url)}`
				});
				 
			},
			fullscreenchange(e) {
				// this.isFullScreen = e.detail.fullScreen; // 获取全屏状态
				// if (!this.isFullScreen) {
				//   // 退出全屏时停止播放
				//   this.videoContext.stop();
				// }
			},
			async confirmSubLease() {
				const res = await subLease({
					id: this.info.id,
					houseRoomName: this.info.houseRoomName,
					remark: this.subLeaseMsg
				});
				this.subLeaseShow = false;
				this.subLeaseMsg = ""
				if (res.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res.data.msg
				})
				this.$refs.uToast.show({
					type: "success",
					message: '转租成功'
				})
			},
			shareInfo(type) {

				let uid = uni.getStorageSync("uid")
				let uname = uni.getStorageSync("uname")
				let phone = uni.getStorageSync("phone")
				let codestr = new Date().valueOf() + ""

				let shareUrl = encodeURI(
					this.$h5HouseDetail + '?ids=' + this.id + '&uid=' + uid + '&uname=' + uname + '&phone=' + phone +
					'&checkbox=' + this
					.checkboxValue1.join(',') +
					'&time=' + this.getNowFormatDate() +
					"&code=" + this.randomCoding() + codestr.substr(codestr.length - 4,
						codestr.length))

				console.log(shareUrl);
				console.log(shareUrl);
				var that = this
				uni.share({
					provider: "weixin",
					scene: type,
					type: 0,
					href: shareUrl, //这里写打开app的urlschemes
					// title: `编号${this.randomCoding() + codestr.substr(codestr.length - 4, codestr.length)}为您推荐了${this.checkedList.length}套好房`,
					title: `(编号:${this.randomCoding() + codestr.substr(codestr.length - 4, codestr.length)}）租房找大宾`,
					summary: `管家为您推荐了1套好房, 快来看看吧`,
					imageUrl: this.imgList[0].url || "",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						that.fliterChecked = []
						that.checkboxValue1 = []
						that.showShare = false;
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
						that.fliterChecked = []
						that.checkboxValue1 = []
						that.showShare = false;
					}
				});
				return
				let base64Url = btoa(unescape(encodeURIComponent(shareUrl)));

				const res = getQrcode(base64Url)

				if (res.data.code == 200) {
					this.qrimgUrl = res.data.data;
					this.showQrTips = true
				} else {
					this.showQrTips = true;
					this.qrimgUrl = '../static/default/qrError.jpeg'
				}

			},
			randomCoding() {
				//创建26个字母数组
				var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				];
				var idvalue = '';
				let n = 2; //这个值可以改变的，对应的生成多少个字母，根据自己需求所改
				for (var i = 0; i < n; i++) {
					idvalue += arr[Math.floor(Math.random() * 26)];
				}
				return idvalue;
			},
			// 保存分享二维码
			saveImage() {
				const qrImageNetAddr = this.qrimgUrl;
				// 先下载二维码
				uni.downloadFile({
					url: qrImageNetAddr,
					success: (res) => {
						const that = this
						console.log(res, '77777')
						if (res.statusCode === 200) {
							// 关闭loading
							//  uni.hideLoading()
							// 保存视频到手机相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									// 成功提示

									uni.showToast({
										title: '保存成功',
										icon: 'none'
									})
									//this.showQrTips=false;

								}
							})
						}

					}
				})
			},
			//获取当前日期函数
			getNowFormatDate() {
				let date = new Date(),
					obj = {
						year: date.getFullYear(), //获取完整的年份(4位)
						month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
						strDate: date.getDate(), // 获取当前日(1-31)
						hour: date.getHours(), //获取当前小时(0 ~ 23)
						minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
						second: date.getSeconds() //获取当前秒数(0 ~ 59)
					}
				Object.keys(obj).forEach(key => {
					if (obj[key] < 10) obj[key] = `0${obj[key]}`
					// console.log(obj[key])
				})

				return `${obj.year}-${obj.month}-${obj.strDate}-${obj.hour}:${obj.minute}:${obj.second}`
			},
			checkboxChange(data) {
				console.log(data);
			},
			checkboxChange1(n) {
				this.fliterChecked = n
				// console.log('change', n);
			},
			callUser() {
				this.isShowOptrainCall = false;
				this.callCustomerService()

			},
			callBrokerUser() {
				this.isShowBrokerCall = false;
				this.callBrokerService()

			},
			changehouseState(num) {
				// rentState
				if (this.info.rentState == num) {
					this.$refs.uToast.show({
						type: "success",
						message: "修改成功",
						position: "bottom"
					})

				} else {
					this.changeHouseRentState();
				}
				this.getData();
				this.showPopupQuit = false;
			},


			async changeHouseRentState() {
				const res = await putHouseState(this.id);
				console.log(res);
				if (res.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res.data.msg,
					position: "bottom"
				})
				this.$refs.uToast.show({
					type: "success",
					message: res.data.msg,
					position: "bottom"
				})

			},
			downVideo() {

				const urllist = this.videoList
				if (urllist.length == 0) return this.$refs.uToast.show({
					type: "error",
					message: '暂无视频',
				})
				const videourl = urllist[0].url



				// 先下载视频
				uni.downloadFile({
					url: videourl,
					success: (res) => {
						const that = this
						console.log(res, '77777')
						if (res.statusCode === 200) {
							console.log(res, '888888')
							// 关闭loading
							//  uni.hideLoading()

							// 保存视频到手机相册
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									// 成功提示

									that.$refs.uToast.show({
										type: "success",
										message: '下载成功',
									})

								}
							})
						}

					}
				})


			},
			navEdit() {
				uni.navigateTo({
					url: '/pages/house/availabilityDetail?id=' + this.info.id
				})
			},
			navSquare() {
				this.showShare = !this.showShare
			},
			_previewImage(url, index) {

				var imgArr = [];
				this.imgList.map((item, index) => {
					imgArr.push(item.url)
				})
				//预览图片
				uni.previewImage({
					count: url,
					urls: imgArr,
					current: index,
					fail(e) {
						this.$refs.uToast.show({
							type: "error",
							message: '预览图片失败'
						})
					}
				});
			},
			// 转租
			sublease() {
				this.subLeaseShow = true;
			},
			callCustomerService() {
				console.log(this.info.landlordPhone);
				let contactNumber = this.info.landlordPhone;
				if (this.info.viewingContactPhone != null && this.info.viewingContactPhone != '') {
					contactNumber = this.info.viewingContactPhone
				}
				uni.makePhoneCall({
					phoneNumber: contactNumber,
					fail() {
						this.$refs.uToast.show({
							type: "error",
							message: '拨打电话失败',
							positio: "bottom"
						})
					}
				});
				this.showPopupQuit = true;
			},
			callBrokerService() {
				console.log(this.info.surveyPhone);
				uni.makePhoneCall({
					phoneNumber: this.info.surveyPhone,
					fail() {
						this.$refs.uToast.show({
							type: "error",
							message: '拨打电话失败',
							positio: "bottom"
						})
					}
				});

			},
			navBackPage() {
				uni.navigateBack(-1)
			},
			changeStar: debounce(async function() {
				if (this.isStar) {
					const res = await addStar({
						"collectionList": [{
							"houseId": this.info.id
						}]
					})

					if (res.data.code != 200) return this.$refs.uToast.show({
						type: "error",
						message: res.data.msg
					})
				} else {
					const res = await deleteStars([this.info.collectId]);
					if (res.data.code != 200) return this.$refs.uToast.show({
						type: "error",
						message: res.data.msg
					})
				}
			}, 500),
			toPerfectInfo() {
				this.isShowOptrainCall = true
			},
			toBrokerPhoneInfo() {
				this.isShowBrokerCall = true
			},
			async getData() {
				const res = await getDetail(this.id);
				if (res.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res.data.msg
				})
				this.info = res.data.data
				let keyAdress = this.info.houseKey
				if (keyAdress == '0') {
					this.info.houseKey = '密码锁密码:' + this.info.remark
					this.remarkIsOtherUse = 1
				}
				if (keyAdress == '1') {
					this.info.houseKey = '消防栓'
				}
				if (keyAdress == '2') {
					this.info.houseKey = '水表箱'
				}
				if (keyAdress == '3') {
					this.info.houseKey = '电表箱'
				}
				if (keyAdress == '4') {
					this.info.houseKey = '物业保安'
				}
				if (keyAdress == '5') {
					this.info.houseKey = '牛奶箱'
				}
				if (keyAdress == '6') {
					this.info.houseKey = '门口地毯'
				}
				if (keyAdress == '7') {
					this.info.houseKey = this.info.remark
					this.remarkIsOtherUse = 1
				}
				if (keyAdress == '8') {
					this.info.houseKey = '联系房东'
				}


				if (this.info.shortRental == null || this.info.shortRental == '0') {
					this.info.shortRental = '无报价'
				}

				this.info.collectStatus == 0 ? this.isStar = false : this.isStar = true
				console.log(res);


				this.filterImg()
			},
			filterImg() {
				if (this.info.mediaVoList.length == 0) return
				this.imgList = [];
				this.videoList = []
				this.info.mediaVoList.map((item, index) => {
					if (item.mediaType == 0) {
						var imgobj = {
							url: item.mediaUrl
						}
						this.imgList.push(imgobj)
					} else {
						var videoobj = {
							url: item.mediaUrl
						}
						this.videoList.push(videoobj)
					}
				})

			},

			toEnterAgreement() {
				uni.navigateTo({
					url: '/pages/home/inputlease/inputlease?id=' + this.id + '&item=' + JSON.stringify(this.info)
				})
			}
		},


	}
</script>

<style scoped lang="scss">
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.text_row {
		@include flexBetween;
		margin-top: 40rpx;
		font-size: 30rpx;

		text {
			font-weight: bold;
			color: $theme;
			font-size: 40rpx;
		}
	}

	.sublease_reason {
		width: 600rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		overflow: hidden;

		.title {
			margin-bottom: 30rpx;
			font-size: 35rpx;
		}

		.sublease_btn {
			margin-top: 30rpx;
		}
	}

	.padding {
		padding: 30rpx;
	}

	.popup {
		padding: 30rpx;

		.cue {
			font-weight: bold;
			font-size: 40rpx;
			text-align: center;
			padding: 40rpx;
		}

		.button_box {
			@include flexBetween;

			.sure {
				margin-right: 10rpx;
			}
		}

		.button {
			margin-bottom: 20rpx;
		}
	}

	.call_lanlord {
		width: 80%;
		margin: 0 auto;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.swiper_box {
		position: relative;
		width: 100%;
		height: 450rpx;
		// margin-top: 50rpx;
		overflow: hidden;
		background-color: #fff;

		.swiper {
			width: 100%;
			height: 100%;

			.swiper_item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.meadia_option {
			position: absolute;
			z-index: 7;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			margin-top: 10%;
			// height: 80rpx;
			// width: 200rpx;
			// background-color: #fff;
			// border-radius: 30rpx;
		}
	}

	.active_floor {
		background-color: #f56e3d;
		border: 1rpx solid #f56e3d !important;
		color: rgb(245, 110, 61);
		// font-weight: bold;
	}

	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #cfcfcf;
		margin-left: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		// margin-top: 10rpx;
	}


	.wrapper {
		.header_operation {
			width: 55rpx;
			height: 55rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #646464;
			position: relative;
			margin-right: 20rpx;

			.start,
			.back,
			.edit {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}


		}

		.middle {
			padding: 20rpx 0;
		}

		.bottom {
			padding: 15px;

			table {
				width: 100%;
				margin-top: 20rpx;

				tr {
					td {
						padding: 10rpx 15px;
						font-size: 15px;
						background-color: #eee;

						&:first-child {
							width: 200rpx;
						}
					}

				}
			}
		}

		.footer {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: fixed;
			bottom: 20rpx;

			.btn {
				width: 280rpx;
			}
		}
	}
</style>